<!-- picker选择器 -->
<link rel="stylesheet" href="/assets/home/plugin/mui/mui.picker.css" />
<link rel="stylesheet" href="/assets/home/plugin/mui/mui.poppicker.css" />
<link rel="stylesheet" href="/assets/home/css/confirm.css" />

<script src="/assets/home/plugin/mui/mui.picker.js"></script>
<script src="/assets/home/plugin/mui/mui.poppicker.js"></script>


    <header class="mui-bar mui-bar-nav mui-bar-nav-bg">
        <a id="icon-menu" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">订单结算</h1>
    </header>
    
    <form method="post">
        <div class="course">
            <div class="left wow bounceIn" data-wow-delay="0.1s">
                <div class="thumb">
                    <img src="{$subject.thumbs_text}" alt="">
                </div>
            </div>
            <div class="right wow bounceIn" data-wow-delay="0.1s">
                <div class="name">{$subject.title}</div>
                <div class="teacher">授课老师：{$subject.teacher.name ? $subject.teacher.name:'暂无老师'}</div>
                <div class="type">课程分类：{$subject.category.name ? $subject.category.name :'暂无分类'}</div>
            </div>
        </div>

        <div class="coupon-info wow" data-wow-delay="100ms">
            <div class="text wow bounceIn" data-wow-delay="0.1s">
                优惠券：
            </div>
            <div class="coupon wow bounceIn" data-wow-delay="0.1s">请选择优惠券</div>
            <input type="hidden" name="coupon" value="" />
        </div>

        <div class="price-info">
            <div class="text">
                课程价格：
            </div>
            <div class="price">
                ￥{$subject.price}
            </div>
        </div>

        <div class="pay-info">
            <div class="text">
                支付方式：
            </div>
            <div class="pay" id="pay">余额支付</div>
            <input type="hidden" name="pay" value="money" />
        </div>
    
        <div class="footer wow" data-wow-delay="400ms">
            <div class="total">
                总价：<span id="total">￥{$subject.price}</span>
            </div>
            <button type="submit" class="btn">提交</button>
        </div>
    </form>

<script>
        new WOW({
            boxClass: 'wow',      // 需要执行动画的元素的 class(默认是wow)
            animateClass: 'animated fadeInDown', // animation.css 动画的 class(默认是animated)
            offset: 0,          // 距离可视区域多少开始执行动画(默认为0)
            mobile: true,       // 是否在移动设备上执行动画(默认为true)
            live: true,       // 异步加载的内容是否有效(默认为true)
            scrollContainer: null // 可选滚动容器选择器，否则使用窗口
        }).init();
        
        //选择支付方式
    $('#pay').click(function(){
        var picker = new mui.PopPicker();

        //设置数据
        picker.setData([
            {value: 'money', text: '余额支付'},
            {value: 'wx', text: '微信支付'},
            {value: 'zfb', text: '支付宝'},
        ]);

        // 显示弹框
        picker.show(function (item) {
            $("#pay").html(item[0].text)
            $("input[name=pay]").val(item[0].value)
        })
    })

    //选择优惠券
    var coupon;

    try{
        coupon = `{$coupon}`
        coupon = JSON.parse(coupon) ? JSON.parse(coupon): []
    }catch(err)
    {
        coupon = []
    }

    if(coupon.length <= 0)
    {
        $(".coupon").html('暂无优惠券')
    }

    $(".coupon").click(function(){
        if(coupon.length <= 0)
        {
            mui.toast('暂无优惠券')
            return false
        }

        var data = [];

        coupon.map((item) => {
            data.push({
                value: item.id,
                rate: item.coupon.rate,
                text: `【优惠活动：${item.coupon.title}】￥ ${item.coupon.rate*100} 折`
            })
        })
        var picker = new mui.PopPicker();

        //设置数据
        picker.setData(data);

        // 显示弹框
        picker.show(function (item) {
            $(".coupon").html(item[0].text)
            $("input[name=coupon]").val(item[0].value)

            var rate = item[0].rate //折扣率
            rate = parseFloat(rate)

            var price = `{$subject.price}`
            price = parseFloat(price)
            
            var total = price*rate
                total = total.toFixed(2)
            $("#total").html(total)
        })

    })
</script>